<template>
  <div class="radio f-cb">
    <div class="radio-wrap f-cb">
      <div class="radio-type f-cb">
        <ul class="type" v-show="!isShowTypeList">
          <li v-for="item in typeList1" :key="item.id">
            <a
              :class="['icon-box', item.isRedbg ? 'z-sel' : '']"
              @click="goRoute('/find/newsradio/radiotype/',item.id)"
            >
              <div
                class="icon"
                :style="{ backgroundImage: `url('${item.picWebUrl}')` }"
              ></div>
              <em>{{ item.name }}</em>
            </a>
          </li>
        </ul>
        <ul class="type" v-show="isShowTypeList">
          <li v-for="item in typeList2" :key="item.id">
            <a
              href="javascript:void(0);"
              :class="['icon-box', item.isRedbg ? 'z-sel' : '']"
              @click="goRoute('/find/newsradio/radiotype/',item.id)"
            >
              <div
                class="icon"
                :style="{ backgroundImage: `url('${item.picWebUrl}')` }"
              ></div>
              <em>{{ item.name }}</em>
            </a>
          </li>
        </ul>
        <ul class="listdot">
          <li :class="{ dot: !isShowTypeList }" @click="turnLeft"></li>
          <li :class="{ dot: isShowTypeList }" @click="turnRight"></li>
        </ul>
        <span
          :class="{ turn: true, turn_left: true, z_dis: !isShowTypeList }"
          @click="turnLeft"
        ></span>
        <span
          :class="{ turn: true, turn_right: true, z_dis: isShowTypeList }"
          @click="turnRight"
        ></span>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>
<script>
// import mixin from "@/components/Mixin/mixin"
export default {
  data: () => ({
    isShowTypeList: false,
    typeList1: [],
    typeList2: [],
  }),
  // mixins:[mixin],
  created() {
    this.getRadioType();
  },
  methods: {
    turnLeft() {
      if (this.isShowTypeList) {
        this.isShowTypeList = false;
      }
    },
    turnRight() {
      if (!this.isShowTypeList) {
        this.isShowTypeList = true;
      }
    },
    async getRadioType() {
      const {
        data: { categories },
      } = await this.Api.wjwApi.getRadioType();
      categories.forEach((item) => {
        item.isRedbg = false;
      });
      this.typeList1 = categories.slice(0, 18);
      this.typeList2 = categories.slice(18);
      // console.log(categories);
    },

    // 路由跳转 + 点击图标变红
    // goRadioType(id) {
    //   // this.$router.push(`/find/newsradio/radiotype/${id}`);
    //   // this.href = `/find/newsradio/radiotype?id=${id}`;
    //   this.typeList1.forEach((fitem) => {
    //     fitem.isRedbg = false;
    //     if (fitem.id == id) {
    //       fitem.isRedbg = true;
    //     }
    //   });
    //   this.typeList2.forEach((f2item) => {
    //     f2item.isRedbg = false;
    //     if (f2item.id == id) {
    //       f2item.isRedbg = true;
    //     }
    //   });
    // },
  },
};
</script>
<style lang="less" scoped>
.radio {
  a {
    text-decoration: none;
  }
  em {
    font-style: normal;
  }
  li {
    list-style: none;
  }
  width: 980px;
  min-height: 700px;
  _height: 700px;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid #d3d3d3;
  border-width: 0 1px;
  .radio-wrap {
    padding: 40px;
    .f-cb:after {
      clear: both;
      content: ".";
      display: block;
      height: 0;
      visibility: hidden;
    }
    .radio-type {
      position: relative;
      width: 900px;
      height: 194px;
      li {
        list-style: none;
        float: left;
      }
      .type {
        width: 933px;
        position: absolute;
        margin-left: -33px;
        height: 194px;
        .icon-box:hover {
          background-color: #f3f3f3;
        }
        li {
          margin: 0 0 25px 33px;
          a {
            display: block;
            border-radius: 5px;
            width: 70px;
            height: 70px;
            background-image: url("../../../../assets/wjwimgs/radio_bg.png");
            background-repeat: no-repeat;
            background-position: 0 9999px;
            text-align: center;
            color: #888;
            .icon {
              width: 48px;
              height: 48px;
              margin: 2px auto 0;
              background-position: 0 0;
            }

            em {
              font-style: normal;
              font-size: 12px;
            }
          }
          a.z-sel {
            background-position: -70px 0;
            color: #d35757;
            .icon {
              background-position: -48px 0;
            }
          }
        }
      }
      .typeindex1 {
        z-index: 1;
      }
      .listdot {
        width: 900px;
        height: 20;
        position: absolute;
        bottom: 0;
        display: flex;
        justify-content: center;
        li {
          width: 20px;
          height: 20px;
          background: url("../../../../assets/wjwimgs/radio_slide.png") no-repeat;
          background-position: 0 0;
        }
        .dot {
          background-position: -30px 0;
        }
      }
      .turn {
        position: absolute;
        top: 50%;
        outline: none;
        width: 20px;
        height: 30px;
        margin-top: -15px;
        opacity: 0.25;
        filter: alpha(opacity=25);
        text-indent: -9999px;
        cursor: pointer;
        background: url("../../../../assets/wjwimgs/radio_slide.png") no-repeat;
        z-index: 10;
      }
      .turn_left {
        left: -26px;
        background-position: 0 -30px;
      }
      .turn_right {
        right: -26px;
        background-position: -30px -30px;
      }
      .z_dis {
        opacity: 0.08;
      }
    }
  }
}
.f-cb:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}
</style>
